<template>
    <div>
        <cus-modal
            ref="modal"
            :title="`营养标签：${ form.dishName }`"
            :width="884"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div style="margin-top:-20px" class="tabsBox">
                <div style="display:flex;padding-top:15px;justify-content: space-between;width:100%">
                    <div class="tab1-left">
                        <div class="tab1-left-title">产品</div>
                        <div class="tab1-left-bottom">
                            <div class="tab1-left-bottom-line">菜肴编码: {{ showForm.dishCode }}</div>
                            <div class="tab1-left-bottom-line">菜肴名称: {{ showForm.dishName }}</div>
                            <div class="tab1-left-bottom-line">菜肴类别: {{ showForm.category }}</div>
                            <div class="tab1-left-bottom-line">烹调类型: {{ showForm.cookingCategory }}</div>
                        </div>
                    </div>
                    <div class="tab1-right" style="margin-left:-1px">
                        <div class="tab1-right-left">
                            <div class="tab1-right-left-title">营养分析/人均</div>
                            <div class="tab1-right-left-content">
                                <div class="tab1-right-left-content-line">糖类：  {{ showForm.sugar }} 克</div>
                                <div class="tab1-right-left-content-line">脂肪：  {{ showForm.fat }} 克</div>
                                <div class="tab1-right-left-content-line">蛋白质：  {{ showForm.protein }} 克</div>
                                <div class="tab1-right-left-content-line">总热量：  {{ showForm.energy }} 千卡</div>
                            </div>
                        </div>
                        <div class="tab1-right-right">
                            <div class="tab1-right-right-title">营养素产热比</div>
                            <div>
                                <piechart ref="piechart" :nutrition="showForm.nutrition"></piechart>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Spin size="large" fix v-if="loading"> </Spin>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button
                            size="small"
                            class="mr_2"
                            @onClick="onCancel"
                            >关闭</cus-button
                        >
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import {
    getDishNutritionLabel
} from "@/api/business/dishesModule";
import piechart from "./piechart"

const form = {
    dishCode: "",
    dishName: ""
};

export default {
    components: { piechart },
    name: "dishesTags",
    data() {
        return {
            loading: false,
            form: form,
            showForm: {},
        };
    },

    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.form = this.$cu.deepClone(form)
            }
        },
        show(row) {
            this.$refs["modal"].show = true;
            this.getDishNutritionLabelApi();
        },
        //模态框确认
        onOk() {
            this.onCancel();
        },
        //模态框取消
        onCancel() {
            this.$refs["modal"].show = false;
        },
        // 获取营养信息 --- 接口
        getDishNutritionLabelApi() {
            this.loading = true;
            return new Promise((resolve) => {
                getDishNutritionLabel({
                    dishCode: this.form.dishCode
                }).then((res) => {
                    this.loading = false;
                    if (res.retCode == 2000) {
                        res.data.nutrition = [
                            { value: res.data.nutrition ? res.data.nutrition[0] : 333, name: "蛋白质" },
                            { value: res.data.nutrition ? res.data.nutrition[1] : 333, name: "脂肪" },
                            { value: res.data.nutrition ? res.data.nutrition[2] : 333, name: "糖" },
                        ]
                        this.showForm = res.data;
                        this.$refs["piechart"].myChart(this.showForm.nutrition);
                        resolve();
                    }
                });
            });
        }
    },
};
</script>
<style scoped lang="less">
.tab1-left {
    width: 248px;
    height: 314px;
    border: 1px solid #CCCCCC;
    margin-right: 24rpx;
    &-title {
        height: 37px;
        border-bottom: 1px solid #CCCCCC;
        line-height: 37px;
        padding-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
    }
    &-bottom {
        padding: 8px 16px;
        &-line {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin-bottom: 8px;
        }
    }
}
.tab1-right {
    // flex: 1;
    width: 565px;
    height: 314px;
    display: flex;
    &-left {
        width: 260px;
        height: 314px;
        border: 1px solid #CCCCCC;
        &-title {
            height: 37px;
            border-bottom: 1px solid #CCCCCC;
            line-height: 37px;
            padding-left: 16px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
        }
        &-content {
            height: 238px!important;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 16px;
            &-line {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                margin-bottom: 8px;
            }
        }
    }
    &-right {
        width: 305px;
        height: 314px;
        border: 1px solid #CCCCCC;
        border-left: none;
        &-title {
            height: 37px;
            border-bottom: 1px solid #CCCCCC;
            line-height: 37px;
            padding-left: 16px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
        }
    }
}

</style>
